<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>毕业设计选题管理系统</title>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
    </style>
    <style type="text/css">
        #head-box {
            width: 100%;
            height: 80px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            background-color: #97a89d;
        }

        #head-box > .logo {
            width: 200px;
            height: 100%;
        }

        #head-box > .logo > .title {
            color: #FFFFFF;
            display: block;
            font-weight: bold;
            font-size: 16px;
            line-height: 80px;
            text-align: center;
        }

        #head-box > .tools {
            display: flex;
            flex-direction: row;
            padding: 20px;
        }

        #head-box > .tools > .label {
            display: block;
            color: #FFFFFF;
            height: 40px;
            line-height: 40px;
            margin-left: 10px;
            padding-left: 10px;
            padding-right: 10px;
            text-align: center;
            text-decoration: none;
            border-radius: 20px;
        }

        #head-box > .tools > .button {
            display: block;
            color: #FFFFFF;
            height: 40px;
            line-height: 40px;
            margin-left: 10px;
            padding-left: 10px;
            padding-right: 10px;
            text-align: center;
            text-decoration: none;
            border-radius: 20px;
            transition: all 300ms ease;
        }

        #head-box > .tools > .button:hover {
            background-color: rgba(255, 255, 255, 0.25);
        }
    </style>
    <style type="text/css">
        #body-box {
            flex: 1;
            display: flex;
            flex-direction: row;
        }

        #body-box > .left-bar {
            width: 200px;
        }

        #body-box > .main-box {
            flex: 1;
            border: none;
            border-left: 1px solid #97a89d;
        }
    </style>
    <style type="text/css">
        #body-box > .left-bar > .item {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: 10px 5px;
            margin: 5px;
            cursor: pointer;
            border: 1px solid #97a89d;
            transition: all 300ms ease;
        }

        #body-box > .left-bar > .item:hover {
            color: #FFFFFF;
            background-color: #97a89d;
            border: 1px solid #97a89d;
            transform: rotateY(-15deg);
        }

        #body-box > .left-bar > .item > .info {
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="head-box">
    <div class="logo">
        <span class="title">毕业设计选题管理系统</span>
    </div>
    <div class="tools">
        <a class="button my-info" href="/static/page/user/my-info.html">个人资料</a>
        <a class="button exit" href="#">退出登录</a>
    </div>
</div>

<div id="body-box">
    <div class="left-bar"></div>
    <iframe class="main-box"></iframe>
</div>

<script src="/static/js/jquery-3.6.1.js" type="text/javascript"></script>
<script src="/static/js/message.js" type="text/javascript"></script>
<script type="application/javascript">
    $(function () {
        // 初始获取元素
        let mainBox = $('#body-box > .main-box');

        // 初始执行代码
        loadMenuItem();

        // 获取菜单选项
        function loadMenuItem() {
            // 获取元素
            let menuEle = $('#body-box > .left-bar');

            // 获取数据
            $.ajax({
                url: '/api/user/my-menu',
                type: "GET",
                success: function (res) {
                    if (res.code === 0) {  // 业务层面成功
                        menuEle.html('');
                        res.data.forEach((item, index) => {
                            if (index === 0)
                                mainBox.attr("src", item[1]);
                            menuEle.append($(`<div class="item" data-href="${item[1]}"><span class="info">${item[0]}</span></div>`)
                                .click(function (e) {
                                    let href = $(e.target).data('href');
                                    if (!href)
                                        href = $(e.target).parent('.item').data('href');
                                    mainBox.attr("src", href);
                                }));
                        });
                    } else {
                        $.message({type: 'error', content: res.msg});
                    }
                }
            });
        }

        // 个人资料按钮点击事件
        $('#head-box > .tools > .button.my-info').click(function (e) {
            e.preventDefault();
            let href = $(e.target).attr('href');
            mainBox.attr("src", href);
        });

        // 退出登录按钮点击事件
        $('#head-box > .tools > .button.exit').click(function (e) {
            e.preventDefault();

            // 提交注销登录请求
            $.ajax({
                url: '/api/user/logout',
                type: "POST",
                success: function () {
                    window.location.replace('/static/login.html');
                }
            });
        });
    });
</script>
</body>
</html>